<template>
  <div>
    <a-modal
      :visible="visible"
      title="选择渠道"
      cancelText="取消"
      okText="确认"
      width="60%"
      @ok="submit"
      @cancel="cancel"
    >
      <pro-query  :searchParam="searchParam"
                  :labelCol="{ span: 7 }"
                  :wrapperCol="{ span: 24 }"
                  @on-search="search"
      />
      <pro-table
        ref="tableRef"
        :fetch="fetch"
        :columns="columns"
        :operate="operate"
        :param="state.param"
        :pagination="pagination"
        :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
      >
      </pro-table>
    </a-modal>
  </div>
</template>

<script>
import {reactive} from "vue";
import { tree } from "@/api/module/dept";

export default {
  name: "school",
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  setup(props, content) {
    /// 数据来源 [模拟]
    const fetch = async (param) => {
      let response = await tree(param);
      return {
        data: response.data,
      };
    };

    /// 行操作
    const operate = [
      {
        label: "选择",
        event: function (record) {
          content.emit('selectUniversity', record)
        }
      },
    ];

    const state = reactive({
      selectedRowKeys: [],
      param: {},
    })

    const columns = [
      { dataIndex: "name", key: "name", title: "渠道名称" },
      { dataIndex: "name", key: "name", title: "渠道类型" },
      { dataIndex: "name", key: "name", title: "状态" },
      { dataIndex: "name", key: "name", title: "渠道负责人" },
    ]

    const cancel = () => {
      content.emit("close", "channelVisible");
    }
    const submit = () => {
      content.emit("close", "channelVisible");
    }

  const searchParam = reactive([
    { key: "name", type: "input", label: "渠道名称", placeholder: '请输入' },
  ])

  const search = (value) => {
    console.log('value: ', value);
  }

    return {
      columns,
      state,
      operate,
      fetch,
      cancel,
      searchParam,
      search
    }
  }
}
</script>

<style scoped>

</style>
